<template>
  <!-- <div class="contain-wrap"></div> -->
  <div
    class="contain"
    :style="{
      paddingRight: dataTypeTabsId == 1 ? 0 : '2.87rem',
    }"
    v-loading="loading"
    element-loading-text="拼命加载中..."
    element-loading-spinner="el-icon-loading"
    element-loading-background="rgba(0,0,0,0.3)"
  >
    <dataTypeTabs @toggleTabs="toggleTabs" :tabs="tabs" />
    <div class="search-con flex-center">
      <!-- <div
        class="icon-tran"
        :class="[isTableList ? 'table' : '']"
        @click="showTableList"
      ></div> -->
      <el-select
        size="mini"
        v-model="sensorValue"
        placeholder="请选择传感器"
        v-if="this.dataTypeTabsId === 2"
        clearable
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="(item, index) in sensorTypeList"
          :key="index"
        >
        </el-option>
      </el-select>
      <el-select
        v-if="this.dataTypeTabsId != 1"
        size="mini"
        v-model="fileTypeValue"
        placeholder="请选择文件类别"
        clearable
      >
        <el-option
          :label="item.categoryName"
          :value="item.id"
          v-for="(item, index) in fileTypeList"
          :key="index"
        >
        </el-option>
      </el-select>
      <el-select
        v-if="this.dataTypeTabsId != 1"
        size="mini"
        v-model="dataTypeValue"
        placeholder="请选择数据类别"
        clearable
      >
        <el-option
          :label="item.name"
          :value="item.id"
          v-for="(item, index) in dataTypeList"
          :key="index"
        >
        </el-option>
      </el-select>
      <!-- 时间检索 -->
      <div class="pro-search pro-datePicker">
        <el-date-picker
          v-model="datePickerVal"
          type="daterange"
          range-separator="至"
          start-placeholder="开始日期"
          end-placeholder="结束日期"
          format="yyyy-MM-dd"
          value-format="yyyy-MM-dd"
          size="mini"
          v-if="this.dataTypeTabsId === 2 || this.dataTypeTabsId === 3"
        >
        </el-date-picker>
      </div>
      <div
        class="search-wrap flex-center-start"
        v-if="this.dataTypeTabsId === 3"
      >
        <div class="icon-search"></div>
        <el-input
          size="mini"
          maxlength="100"
          type="text"
          placeholder="请输入标题"
          v-model="videoTitle"
        />
      </div>
      <div class="search-wrap flex-center-start">
        <div class="icon-search"></div>
        <el-input
          size="mini"
          maxlength="100"
          type="text"
          placeholder="请输入文件名称"
          v-model="picName"
        />
      </div>
      <!-- <div class="icon-sort"></div> -->
      <div class="search-wrap flex-center-start">
        <div class="icon-search"></div>
        <el-input
          size="mini"
          maxlength="100"
          type="text"
          placeholder="请输入文件来源"
          v-model="source"
        />
      </div>
      <!-- <div
        class="search-wrap flex-center-start"
        v-if="this.dataTypeTabsId === 3"
      >
        <div class="icon-search"></div>
        <el-input size="mini"
          maxlength="100"
          type="text"
          placeholder="请输入视频名称"
          v-model="picName"
        />
      </div> -->
      <!-- <div
        class="search-wrap flex-center-start"
        v-if="this.dataTypeTabsId === 1"
      >
        <div class="icon-search"></div>
        <el-input size="mini"
          maxlength="100"
          type="text"
          placeholder="请输入内容"
          v-model="picName"
        />
      </div> -->
      <el-button type="primary" size="mini" @click="goSearch">搜索</el-button>
      <el-button type="primary" size="mini" @click="infoClean">清空</el-button>
    </div>
    <imageVideoGroup
      v-if="dataTypeTabsId != 1"
      class="imageVideoGroup"
      :isShare="true"
      :imageVideoList="imageVideoList"
      :selectedTabId="selectedTabId"
      ref="imageVideoGroup"
    />
    <!--    列表-->
    <!-- <dataSharingList
      v-if="dataTypeTabsId == 1"
      :dataInfoList="dataInfoList"
      v-loading="loading"
      element-loading-text="拼命加载中..."
      element-loading-spinner="el-icon-loading"
      element-loading-background="rgba(0,0,0,0.3)"
    ></dataSharingList> -->
    <div class="image-pagination">
      <el-pagination
        background
        small
        layout="prev, pager, next, total, jumper"
        :current-page="currentPage"
        :page-size="pageSize"
        :total="total"
        @current-change="handleCurrentChange"
        :key="paginationKey"
      >
      </el-pagination>
    </div>
  </div>
</template>

<script>
import imageVideoGroup from "@/components/imageVideo/imageVideoGroup";
import dataTypeTabs from "../components/common/dataTypeTabs";
import { mapState } from "vuex";
export default {
  components: {
    dataTypeTabs,
    imageVideoGroup,
  },
  watch: {
    targetTreeChecked(newValue) {
      this.getTargetData(newValue);
    },
    //文件类型1是资料2是图片3是视频
    dataTypeTabsId() {
      // 解决currentPage 不动态绑定的问题
      this.currentPage = 1;
      this.paginationKey = Math.random();
      this.getTargetData(this.targetTreeChecked);
    },
  },
  computed: {
    ...mapState({
      targetTreeChecked(state) {
        return state.app.targetTreeChecked;
      },
      dataTypeTabsId(state) {
        return state.app.dataTypeTabsId;
      },
    }),
  },
  data() {
    return {
      selectedTabId: 2,
      imageVideoList: [],
      dataInfoList: [],
      zcimageList: [],
      zcvideoList: [],
      list: [],
      currentPage: 1, // 分页
      paginationKey: 0, // 解决currentPage 不动态绑定的问题
      total: 0,
      pageSize: 12,
      loading: false,
      datePickerVal: [],
      picName: "",
      source: "",
      videoTitle: "",
      sensorValue: "",
      fileTypeValue: "",
      dataTypeValue: "",
      sensorTypeList: [],
      fileTypeList: [],
      dataTypeList: [
        { name: "原始数据", id: 0 },
        { name: "成果数据", id: 1 },
      ],
      tabs: [
        {
          name: "侦察图像",
          id: 2,
        },
        {
          name: "侦察视频",
          id: 3,
        },
      ],
    };
  },
  created() {
    this.getTargetData(this.targetTreeChecked);
    this.sensorType();
    this.getFileType();
  },
  methods: {
    // 传感器类型
    async sensorType() {
      let data = await this.$api.sensorType();
      this.sensorTypeList = data;
    },
    // 文件类别
    async getFileType() {
      let data = await this.$api.getFileType();
      this.fileTypeList = data;
    },
    async getTargetData(
      targetIdArr,
      pageNo,
      pageSize,
      picName,
      endTime,
      sensorValue,
      fileTypeValue,
      dataTypeValue,
      source,
      startTime,
      videoTitle
    ) {
      this.loading = true;
      let data = await this.$api.getTargetData({
        list: targetIdArr ? targetIdArr : this.targetTreeChecked,
        pageNo: pageNo ? pageNo : this.currentPage,
        pageSize: pageSize ? pageSize : this.pageSize,
        searchName: picName ? picName : this.picName,
        endTime: endTime ? endTime : this.datePickerVal[1],
        sensorType: sensorValue ? sensorValue : this.sensorValue,
        fileTypeId: fileTypeValue ? fileTypeValue : this.fileTypeValue,
        isProduct: dataTypeValue ? dataTypeValue : this.dataTypeValue,
        source: source ? source : this.source,
        startTime: startTime ? startTime : this.datePickerVal[0],
        videoTitle: videoTitle ? videoTitle : this.videoTitle,
        dataType: this.dataTypeTabsId,
      });
      if (this.dataTypeTabsId == 2) {
        this.imageVideoList = data.zcimageList.list;
        this.total = data.zcimageList.total;
      } else if (this.dataTypeTabsId == 3) {
        this.imageVideoList = data.zcvideoList.list;
        this.total = data.zcvideoList.total;
      } else if (this.dataTypeTabsId == 1) {
        this.dataInfoList = data.dataInfoList.list;
        this.total = data.dataInfoList.total;
      }
      this.loading = false;
      // 解决currentPage 不动态绑定的问题
      this.paginationKey = Math.random();
    },
    handleCurrentChange(currentPage) {
      this.currentPage = currentPage;
      this.getTargetData(
        this.targetTreeChecked,
        currentPage,
        this.pageSize,
        this.picName,
        this.datePickerVal[1],
        this.sensorValue,
        this.fileTypeValue,
        this.dataTypeValue,
        this.source,
        this.datePickerVal[0],
        this.videoTitle
      );
    },
    toggleTabs(id) {
      this.selectedTabId = id;
    },
    // 搜索
    goSearch() {
      this.currentPage = 1;
      this.getTargetData(
        this.targetTreeChecked,
        1,
        this.pageSize,
        this.picName,
        this.datePickerVal[1],
        this.sensorValue,
        this.fileTypeValue,
        this.dataTypeValue,
        this.source,
        this.datePickerVal[0],
        this.videoTitle
      );
    },
    // 清空信息
    infoClean() {
      this.currentPage = 1;
      this.sensorValue = "";
      this.fileTypeValue = "";
      this.dataTypeValue = "";
      this.datePickerVal = "";
      this.picName = "";
      this.source = "";
      this.videoTitle = "";
      this.getTargetData(this.targetTreeChecked);
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep .image-pagination {
  position: absolute;
  bottom: 0;
  right: 0;
  margin-right: 2.87rem;
  .el-pagination.is-background .el-pager li:not(.disabled).active {
    background-color: #1890ff;
    color: #ffffff;
  }
  .el-pagination.is-background .btn-prev,
  .el-pagination.is-background .btn-next,
  .el-pagination.is-background .el-pager li {
    background-color: #034475;
  }
  .el-pagination--small .el-pagination__editor.el-input .el-input__inner {
    background: #034475;
    border: 0px;
  }
  .el-pagination--small span:not([class*="suffix"]),
  .el-pagination--small button {
    color: #034475;
    margin-left: 20px;
  }
  .el-pagination .btn-prev .el-icon,
  .el-pagination .btn-next .el-icon {
    color: #ccc;
  }
  .el-pagination.is-background .el-pagination__total,
  .el-pagination.is-background .el-pagination__jump {
    color: #1890ff;
    font-weight: 700;
  }
  .el-pagination.is-background .el-pagination__jump .el-input__inner {
    color: #fff;
  }

  .el-pagination.is-background .btn-prev:hover .el-icon,
  .el-pagination.is-background .btn-next:hover .el-icon {
    color: #fff;
  }
  .el-pagination.is-background .el-pager .number:hover,
  .el-pagination.is-background .btn-prev:hover,
  .el-pagination.is-background .btn-next:hover {
    background-color: #1890ff;
    color: #ffffff;
  }
}
.contain {
  height: calc(100vh - 0.6rem);
  padding-left: 0.1rem;
  padding-bottom: 0.3rem;
  .search-con {
    position: relative;
    margin: 0.1rem 0;
    & > div {
      margin-right: 0.06rem !important;
    }
    & > button {
      width: 0.6rem;
      margin: 0;
      padding-left: 0.1rem;
      padding-right: 0.1rem;
      margin-right: 0.06rem !important;
    }
    .icon-tran {
      &.table {
        background-image: url(~@/assets/images/list_icon.png);
      }
      background-image: url(~@/assets/images/thumbnail_switch@2x.png);
      width: 0.18rem;
      height: 0.18rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
      position: absolute;
      top: -0.44rem;
      right: 3rem;
    }
    .icon-sort {
      background-image: url(~@/assets/images/thumbnail_switch@2x.png);
      width: 0.18rem;
      height: 0.18rem;
      background-repeat: no-repeat;
      background-size: 100% 100%;
      background-position: center;
    }
    ::v-deep.el-input.el-input--suffix {
      width: 1.9rem;
    }
    // ::v-deep.el-input {
    //   background: #034576;
    // }
    ::v-deep.el-input__inner {
      background: #034576;
      // height: 0.38rem;
      color: #ffffff;
      font-size: 0.14rem;
      border: 1px solid #034576;
      padding: 0 6px;
    }
    ::v-deep.el-input__icon {
      // height: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    ::v-deep.el-date-editor {
      width: 3rem;
      .el-range-separator {
        color: #f5f5f5;
        line-height: 18px;
        height: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
      }
      input {
        color: #f5f5f5;
      }
    }
    .search-wrap {
      // margin-left: 0.1rem;
      // margin-right: 0.2rem;
      width: 3.44rem;
      // height: 0.36rem;
      background: #034576;
      // border: 0.01rem solid #313030;
      font-size: 0.14rem;
      border-radius: 0.05rem;
      .icon-search {
        margin-left: 0.1rem;
        background-image: url(~@/assets/images/search@2x.png);
        width: 0.14rem;
        height: 0.15rem;
        background-repeat: no-repeat;
        background-size: contain;
        background-position: center;
      }
      input {
        color: #fff;
        padding: 0 0.1rem;
        font-size: 0.14rem;
        width: 100%;
        height: 100%;
        display: block;
      }
    }
  }
}
</style>
